<template>
  <Select v-model="trueVal" :placeholder="placeholder" :label-in-value="true" class="select-tree">
    <Option v-for="item of listData" :value="item.value" :key="item.value" style="display: block;">{{item.label}}</Option>
    <!-- <Tree :data="treeData" ref="selectTree" :render="renderContent"></Tree> -->
  </Select>
</template>

<script>
export default {
  name: 'SelectTree',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    data: {
      type: Array,
      default: () => []
    },
    placeholder: {
      type: String,
      default: '请选择'
    }
  },
  data () {
    return {
      trueVal: this.value,
      listData: [
        { value: '11', label: 'parent 1-1', children: [{ value: '11', label: 'parent 1-1', children: [] }] }
      ],
      treeData: [
        // {
        //   title: 'parent 1',
        //   expand: true,
        //   value: '1',
        //   children: [
        //     {
        //       title: 'parent 1-1',
        //       expand: true,
        //       value: '11',
        //       children: [
        //         {
        //           value: '111',
        //           title: 'leaf 1-1-1',
        //           children: []
        //         },
        //         {
        //           value: '112',
        //           title: 'leaf 1-1-2',
        //           children: []
        //         }
        //       ]
        //     },
        //     {
        //       title: 'parent 1-2',
        //       value: '12',
        //       expand: true,
        //       children: [
        //         {
        //           value: '121',
        //           title: 'leaf 1-2-1',
        //           children: []
        //         },
        //         {
        //           value: '122',
        //           title: 'leaf 1-2-2',
        //           children: []
        //         }
        //       ]
        //     }
        //   ]
        // }
      ]
    }
  },
  watch: {
    value (newVal) {
      console.log(newVal)
      this.trueVal = newVal
      // console.log(this.trueVal)
    },
    treeData: {
      handler (newVal) {
        if (newVal) {}
      },
      deep: true
    }
  },
  mounted () {
    setTimeout(() => {
      // this.treeData = [...this.data]
      // this.listData = []
      // if (this.treeData.length === 0) {
      //   this.listData = []
      // } else {
      //   this.treeToList(this.treeData, 'value', 'title')
      // }
      // console.log(this.listData)
    })
  },
  methods: {
    treeToList (arr, value = 'value', title = 'title', children = 'children') {
      for (let i = 0; i < arr.length; i++) {
        this.listData.push({
          value: arr[i][value],
          label: arr[i][title]
        })
        if (arr[i].children.length !== 0) {
          this.treeToList(arr[i].children, 'value', 'title')
        }
      }
    },
    renderContent (h, { root, node, data }) {
      return h('Option', {
        style: {
          display: 'inline-block',
          margin: '0'
        },
        class: 'ivu-select-item',
        props: {
          value: node.node.value,
          key: node.node.value
        },
        nativeOn: {
          click: (e) => {
            e.stopPropagation()
            // console.log(node)
            if (!node.node.selected) this.handleClick(node)
          }
        }
      }, [
        h('span', {
          class: data.selected ? 'ivu-tree-title ivu-tree-title-selected' : 'ivu-tree-title'
        }, data.title)
      ])
    },
    handleClick (node) {
      // console.log(node)
      this.$refs['selectTree'].handleSelect(node.nodeKey)
      // this.trueVal = '1'
      this.trueVal = node.node.value
      // console.log(this.trueVal)
      this.$emit('input', node.node.value)
      this.$emit('change', node.node.value)
      this.$emit('on-change', node.node.value)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/style/main-panel.styl'

.main-select-tree
  & >>> .ivu-select-dropdown-list
    padding-left 5px
</style>
